<template>
   <div>
      <!--引用表格-->
      <BasicTable bordered size="middle" :loading="loading" rowKey="id"  :canResize="false" :columns="labSampleColumns"
         :dataSource="dataSource" :pagination="false">
         <!--操作栏-->
         <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'operation'">
               <a-button type="link" class="ml-2" @click="openBarCode(record)">条形码 </a-button>
            </template>
         </template>
         <!--字段回显插槽-->
         <template #htmlSlot="{ text }">
            <div v-html="text"></div>
         </template>
         <!-- <template #fileSlot="{ text }">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
            <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small"
               @click="downloadFile(text)">下载</a-button>
         </template> -->
      </BasicTable>
      <!-- 条形码区域 -->
      <LabSampleBarModal @register="registeBarModal"> </LabSampleBarModal>
   </div>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue';
import { BasicTable } from '/@/components/Table';
import { labSampleColumns } from '../LabEntrustItems.data';
import { labSampleLists } from '../LabEntrustItems.api';
import LabSampleBarModal from './LabSampleBar.vue';
import { useModal } from '/@/components/Modal';
const props = defineProps({
   id: {
      type: String,
      default: '',
   },
   entrustId: {
      type: String,
      default: '',
   },
})

const loading = ref(false);
const dataSource = ref([]);

watchEffect(() => {
    props.entrustId && loadData(props.entrustId);   
});


function loadData(id) { 
   dataSource.value = []
   loading.value = true
   labSampleLists({ id }).then((res) => {
      if (res.success) {
         dataSource.value = res.result.records
      }
   }).finally(() => {
      loading.value = false
   })
}

//弹窗注册
const [registeBarModal, { openModal }] = useModal();


// //打开条形码弹窗
function openBarCode(record) {
   openModal(true, record);//record 将数据传到条形模块中
}

</script>
<style>
@media print {
   .hidden {
      display: none;
   }

   @page {
      size: auto;
      /* auto is the initial value */
      margin: 0mm 0mm 0mm 0mm;
      /* this affects the margin in the printer settings */

   }
}
</style>
